<template>
	<view>

		<view v-for="(student, index) in studentList" :key="index" class="container"> 
		
			<!-- 生成多个rect -->
			<view class="rect" @click="toPhoto(student.id)">  
			  <!-- 头像 -->
		      <image :src="student.studentAvatar" class="avatar"></image>  
			  <!-- 其他信息 -->
			  <view class="content">
				  
				  <view class="content1">
					<view class="stuName">{{ student.studentName }}</view>  
					<image :src="getImagePath(student.studentSex)" mode="aspectFit" class="stuSex"></image>
					<view class="className"> {{ student.className }}</view>
				  </view> 
					
				  <view class="content2">
					<text class="stuBirth">{{ student.studentBirthday }}</text>  
					<text class="kgName">{{ student.kgName }}</text>  
				  </view> 
				  
			  </view> 
				  
			   
		    </view>  
			
		</view>  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//学生列表
				studentList:[],
				student: null,
				//家长id
				parentId: null,
			}
		},
		onLoad() {
			this.getStudentList()
			uni.$on('getStudentInfo',() => {
					this.getStudentList()
				})
		},
		mounted() {
			
		},
		
	
		methods: {
			//跳转学生照片
			toPhoto(id){
				uni.$common.navigateTo("/pages/photo/photo?id="+id)
			},
			
			getStudentList(){
				this.parentId = uni.getStorageSync("parentId")
				
				uni.$api.studentFindAllByParentId(this.parentId).then(result =>{
					if(result[0]==null){
						console.log("result[0]========================"+result[0])
					}else{
						this.studentList = result
					}
				})
							
			},
			getImagePath(gender) {  
			  if (gender === '1') {  
				return '/static/me/nan.png';
			  } else if (gender === '2') {  
				return '/static/me/nv.png';
			  } else {  
				return ''; // 如果性别不是1或2，返回空路径或其他默认图片路径  
			  }  
			}  

		}
	}
</script>

<style>
.container {
	width: 750rpx;
}

.rect {  
  width: 700rpx;
  height: 230rpx;
  margin-top: 25rpx;
  border-radius: 20rpx;
  background-color: #FDC722;
  display: block;
  margin: 35rpx auto;
  position: relative;
}

.avatar {  
	width: 115rpx;
	height: 115rpx;
	position: absolute;
	margin-left: 45rpx;
	top: 50%;
	transform: translate(0, -50%); 
	border-radius: 50%;
	align-items: center;
	border: 2px white solid;
}

.content {  
	position: absolute;
	margin-left: 195rpx;
	top: 50%;
	transform: translate(0, -50%); 
}

.content .content1{

}
.content .content2{
	margin-top: 10rpx;
}

.stuName{
	display: inline-block;
	/* width: 100rpx; */
	font-size: 33rpx;
	font-weight: bold;
}
.stuSex{
	width: 25rpx;
	height: 25rpx;
	margin: 0 10rpx 0 10rpx;
	border-radius: 50%;
}
.className{
	display: inline-block;
	font-size: 15rpx;
	padding: 5rpx 20rpx;
	/* width: 120rpx; */
	background-color: #FDF4D0;
	margin-left: 10rpx;
	font-weight: bold;
	text-align: center;
	border-radius: 50rpx;
}
.stuBirth{
	font-size: 20rpx;;
}
.kgName{
	font-size: 20rpx;
	margin-left: 40rpx;
}

</style>
